<template>
  <div>
    <r-table
      :tableHandles="tableHandles"
      :isSelection="false"
      :isIndex="false"
      :isPagination="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="tablePage"
      :isHandle="true"
      @refresh="init()"
    >
    </r-table>
    <r-form
      :formRules="formRules"
      :formHandle="formHandle"
      :formData="formData"
      :formCols="formCols"
      ref="elForm"
      labelWidth="200px"
      dialogWidth="800px"
      :isHandle="true"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableHandles: [
        {
          label: "Add账户",
          type: "primary",
          plain: true,
          handle: e => this.elFormVisible()
        }
      ],
      tableData: [],
      tableCols: [
        {
          label: "User姓名",
          prop: "trueName"
        },
        {
          label: "账户",
          prop: "account"
        },
        {
          label: "账户Type",
          prop: "type"
        },
        {
          label: "TypeName",
          prop: "typeName"
        },
        {
          label: "Creation Time",
          prop: "ctime"
        },
        {
          label: "Operations",
          type: "button",
          width: 220,
          btnList: [
            {
              label: "Edit",
              type: "primary",
              icon: "el-icon-edit",
              plain: true,
              handle: row => this.elFormDetail(row)
            },
            {
              label: "Delete",
              type: "danger",
              plain: true,
              icon: "el-icon-delete",
              handle: async row => {
                this.$confirm("确定要Delete吗?", "Hint", {
                  confirmButtonText: "Confirm",
                  cancelButtonText: "Cancel",
                  type: "warning"
                })
                  .then(async () => {
                    var res = await this.apis.accountDelById(row.id);
                    this.$message({
                      type: res.code == 200 ? "success" : "error",
                      message: res.code == 200 ? "success" : "error"
                    });
                    this.init();
                  })
                  .catch(() => {});
              }
            }
          ]
        }
      ],
      tablePage: { limit: 10, page: 1, total: 0 },
      formData: {
        id: "",
        type: "", //Type 1：Alipay 2 银行
        trueName: "", //账户姓名
        account: "", //账户
        typeName: "" //具体的Name 如Payment宝、具体的银行Name
      },
      formCols: [
        // { type: "input", label: "账户ID", width: 350, prop: "id" },
        {
          type: "select",
          label: "账户Type",
          width: 350,
          prop: "type",
          options: [
            { value: 1, label: "Alipay" },
            { value: 2, label: "银行卡" }
          ]
        },
        { type: "input", label: "账户姓名", width: 350, prop: "trueName" },
        {
          type: "input",
          label: "账户",
          width: 350,
          prop: "account",
          placeholder: "Please Input你的银行卡或者Payment宝账号"
        },
        {
          type: "input",
          label: "Alipay/银行具体的Name",
          width: 350,
          prop: "typeName",
          placeholder: "Please Input你的银行/Alipay具体的Name，如中国银行"
        }
      ],
      formRules: {
        id: [{ required: true, message: "Please Enter", trigger: "blur" }],
        type: [
          { required: true, message: "Please Select账户Type", trigger: "blur" }
        ],
        trueName: [
          { required: true, message: "Please Input账户姓名", trigger: "blur" }
        ],
        account: [
          { required: true, message: "Please Input账户", trigger: "blur" }
        ],
        typeName: [
          {
            required: true,
            message: "Please InputPayment宝/银行具体的Name",
            trigger: "blur"
          }
        ]
      },
      formHandle: [
        {
          label: "Cancel",
          handle: e => this.elFormVisible()
        },
        {
          label: "Confirm",
          type: "success",
          handle: e => this.elFormSubmit()
        }
      ],
      cash: 0
    };
  },
  async mounted() {
    this.init();
  },
  methods: {
    async init() {
      let parm = {
        ...this.searchData,
        ...{
          pageNum: this.tablePage.page,
          pageSize: this.tablePage.limit
        }
      };
      let res = await this.apis.accountList(parm);
      if (res) {
        this.tableData = res.data || [];
        this.tablePage.total = res.total;
      }
    },
    // Edit按钮
    elFormDetail(row) {
      Object.keys(this.formData).forEach(key => {
        this.formData[key] = row[key];
      });
      this.formData.id = row.id;
      this.elFormVisible();
    },
    // Add/Edit---确定按钮
    async elFormSubmit() {
      this.$refs.elForm.$refs.ruleForm.validate(async valid => {
        if (valid) {
          if (this.formData.id) {
            let res = await this.apis.accountEdit(this.formData);
            this.$message({
              type: res.code == 200 ? "success" : "error",
              message: res.msg
            });
            this.init();
            this.elFormVisible();
          } else {
            let res = await this.apis.accountSave(this.formData);
            this.$message({
              type: res.code == 200 ? "success" : "error",
              message: res.msg
            });
            this.init();
            this.elFormVisible();
          }
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
.el-icon-search {
  margin-right: 10px;
}

.Tip {
  margin-left: 20px;
}
</style>
